<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
        :root {
            --primary-color: #5e72e4;
            --secondary-color: #825ee4;
            --accent-color: #f5365c;
            --dark-color: #2d3748;
            --light-color: #f8fafc;
            --text-color: #222222;
        }

        body { 
            background: linear-gradient(135deg, #f6f9fc 0%, #e9eff5 100%);
            margin: 0;
            padding: 0;
            width: 1080px; /* 调整卡片宽度 */
            height: 1440px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-color);
        }
   
        .card {
            width: 1078px; /* 调整卡片宽度 */
            height: 1438px;
            background: white;
            border-radius: 40px; 
            overflow: hidden;
            position: relative;  
        }

        .card-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white; 
            position: relative;
            overflow: hidden;
            height: 660px;
            padding-top: 60px;
        } 
        .card-title{
           width: 857px;
           height: 85px; 
           margin: 0 auto; 
        }

        .card-header::before {
            content: '';
            position: absolute;
            top: 100px;
            right: -100px;
            width: 250px;
            height: 250px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 50%;
        }

        .card-header::after {
            content: '';
            position: absolute;
            bottom: -25px;
            left: 60px;
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            transform: rotate(45deg);
            z-index: 1;
        } 

        .question-content { 
            width: 1020px; 
            height: 530px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 120px;
            font-weight: 600;
            margin: 20px auto;
            line-height: 1.5; 
            position: relative;
            z-index: 2;
        } 
        .card-body {
          width: 1078px;
          margin: 40px auto;
        }

        .options {
            width: 1020px;
            height:640px;
            overflow: hidden; 
            margin: 0 auto
        }

        .option {
          display: flex;
          align-items: center;
          margin-bottom: 16px;
          height: 146px;
          background: #f8fafc;
          border-radius: 12px;
          border: 1px solid #edf2f7;
          flex-wrap: nowrap;
          align-content: center;
          flex-direction: row;
        } 
    
        .option-label {
            font-weight: bold;
            font-size: 40px;
            color: var(--primary-color);
            width: 80px;
            height:80px;
            line-height: 80px;
            text-align: center;
            margin-right: 16px; 
        }

        .option-text {
            width: 920px; 
            font-weight: bold; 
            line-height: 1.5;
            word-break: break-word;
            color: var(--text-color);
        }   
 /*题目文字*/
 .long-text-20{
    font-size: 100px; 
  }
 .long-text-30{
    font-size: 86px; 
  }
  .long-text-40{
    font-size: 80px; 
  }
  .long-text-50{
    font-size: 68px; 
  }
  .long-text-70{
    font-size: 64px; 
  }
  .long-text-80{
    font-size: 58px; 
  }
  .long-text-90{
    font-size: 56px; 
  }
 .long-text-100{
    font-size: 54px; 
  }
  .long-text-150{
    font-size: 48px; 
  }
  .long-text-200{
    font-size: 36px; 
  }
  .long-text-300{
    font-size:32px; 
  }
  .long-text-400{
    font-size:28px; 
  }
  .long-text-end{
    font-size: 26px; 
  } 
   /*选项文字*/
  .long-option-text-10{
    font-size: 44px;
   } 
   .long-option-text-20{
    font-size: 40px;
   } 
   .long-option-text-30{
    font-size: 36px;
   } 
   .long-option-text-40{
    font-size: 32px;
   } 
   .long-option-text-50{
    font-size: 24px;
   } 
</style>
</head>
<body>
  <div class="card">  
    <div class="card-header"> 
        <div class="card-title"> 
          <!-- <img src="./question-title.png" alt="">  -->
           <img src="{{question_title}}" alt="">
        </div>
        <div class="question-content {{text_size_class}}"> 
          {{question_text}}
        </div>
    </div> 
    <div class="card-body">
        <div class="options ">  
          {{options}} 
        </div>   
    </div>
</div>
</body>
</html>